<template>
  <div>
    <a-modal
      width="600px"
      :title="title"
      :visible="visible"
      @ok="handleSubmit()"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="formRef"
        :model="formModel"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        labelAlign="left"
        :colon="false"
      >
        <a-form-model-item :label="$t('common.username')" prop="account">
          <a-input v-model="formModel.account" />
        </a-form-model-item>

        <a-form-model-item prop="userName" :label="$t('subAccount.fullname')">
          <a-input v-model="formModel.userName" />
        </a-form-model-item>

        <a-form-model-item :label="$t('subAccount.role')">
          <a-radio-group v-model="formModel.roleCode">
            <a-radio value="EMPLOYEE"> {{ $t('subAccount.employee') }}</a-radio>
            <a-radio value="VISITOR"> {{ $t('subAccount.guest') }}</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import { mapState } from 'vuex';
import { ValiDateTools } from '@/utils/validateTools';
export default {
  name: 'AddSubAccountModal',
  components: {},
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,
      isEdit: false,
      formModel: {
        account: '',
        accountId: 0,
        userName: '',
        roleCode: 'EMPLOYEE',
      },
      rules: {
        account: [
          {
            required: true,
            message: this.$t('common.notNull'),
          },
          {
            validator: (rule, value, callback) => {
              if (!/^[0-9a-zA-Z.@_-]+$/.test(value)) {
                return callback(this.$t('common.validWordTip3'));
              }
              return callback();
            },
            trigger: 'blur',
          },
          {
            message: this.$t('common.byteRange', [64]),
            max: 64,
            trigger: 'blur',
          },
          {
            validator: this.validateName,
            trigger: 'blur',
          },
        ],
        userName: [
          {
            required: true,
            message: this.$t('userManage.fieldIsRquired'),
          },
          {
            message: this.$t('common.byteRange', [64]),
            max: 64,
            trigger: 'blur',
          },
          {
            validator: this.validateName,
            trigger: 'blur',
          },
        ],
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
  },
  computed: {
    ...mapState('Group', ['grouproot', 'groupId']),
    isPrivate() {
      return process.env.VUE_APP_MACC_CLOUD_ENV === 'private';
    },
  },
  watch: {
    visible(val) {
      if (val) {
        if (!this.formModel.accountId) {
          this.formModel.groupName = this.grouproot.name;
          this.formModel.groupId = this.grouproot.groupId;
        }
      }
    },
  },
  methods: {
    validateName(rule, value, callback) {
      if (ValiDateTools.isEmojiCharacter(value)) {
        return callback(new Error(this.$t('common.notEnterEmoji')));
      }

      return callback();
    },
    // 保存
    handleSubmit() {
      this.$refs.formRef.validate((values) => {
        if (!values) {
          return false;
        }
        this.addNewAccount();
      });
    },
    // 取消
    handleCancel() {
      this.visible = false;
      this.$refs.formRef.clearValidate();
      this.resetFrom();
    },
    resetFrom() {
      this.formModel = {
        account: '',
        accountId: 0,
        userName: '',
        roleCode: 'EMPLOYEE',
      };
    },
    // 添加全新用户
    async addNewAccount() {
      var data = {
        api: maccApi.SUBACCOUNT_CREATE_POST_API,
        method: 'POST',
        params: this.formModel,
      };
      let res = await requestHttp(data);
      if (res && res.code == 0) {
        //TODO
        this.$message.success(this.$t('common.addSuceess'));
        this.resetFrom();
        this.$emit('addCallback', res.data);
        this.visible = false;
      } else {
        this.$message.warning(res.msg);
      }
    },
  },
};
</script>
